<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/draw/src/draw.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/draw/src/draw.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div>&lt;/div>
&lt;/template>

&lt;script>
/**
 * 画图组件
 * @module xdh-map-draw
 */
import Collection from 'ol/Collection'
// import Polygon from 'ol/geom/Polygon'
// import Feature from 'ol/Feature'
import { getParent, mapReady, createBezierCurvePoints } from 'utils/util'
import { parse } from 'utils/style'
import { Draw, Modify } from 'ol/interaction.js'
import CleanMixin from 'utils/mixins/clean'
import { convertFromWgs84 } from 'utils/convert'
/**
 * 参数属性
 * @member props
 * @property {string} type 画图类型，可选值：'Point', 'LineString','LinearRing', 'Polygon', 'MultiPoint', 'MultiLineString','MultiPolygon','GeometryCollection', 'Circle'
 * @property {number} [dragVertexDelay=500] Delay in milliseconds after pointerdown before the current vertex can be dragged to its exact position.
 * @property {number} [snapTolerance=12] Pixel distance for snapping to the drawing finish.
 * @property {boolean} [stopClick]
 * @property {number} [maxPoints]
 * @property {number} [minPoints]
 * @property {object} [styleJson] Style描述JSON
 * @property {boolean} [freehand]
 * @property {boolean} [wrapX]
 */

const vueProps = {
  type: {
    type: String,
    default: 'LineString'
  },
  validator(val) {
    return [
      'Point',
      'LineString',
      'LinearRing',
      'Polygon',
      'MultiPoint',
      'MultiLineString',
      'MultiPolygon',
      'GeometryCollection',
      'Circle'
    ].includes(val)
  },
  // Delay in milliseconds after pointerdown before the current vertex can be dragged to its exact position.
  dragVertexDelay: {
    type: Number,
    default: 500
  },
  // Pixel distance for snapping to the drawing finish.
  snapTolerance: {
    type: Number,
    default: 12
  },
  // Stop click, singleclick, and doubleclick events from firing during drawing
  stopClick: Boolean,
  // The number of points that can be drawn before a polygon ring or line string is finished.
  // By default there is no restriction.
  maxPoints: Number,
  // The number of points that must be drawn before a polygon ring or line string can be finished.
  // Default is 3 for polygon rings and 2 for line strings.
  minPoints: Number,

  // Style描述JSON
  styleJson: Object,

  freehand: Boolean,
  // Wrap the world horizontally on the sketch overlay.
  wrapX: Boolean,

  smooth: Boolean
}

const makeSmooth = function(path) {
  if (path.length > 2) {
    return createBezierCurvePoints(path.length - 1, path)
  } else {
    return path
  }
}

export default {
  name: 'XdhMapDraw',
  mixins: [CleanMixin],
  props: vueProps,
  data() {
    return {}
  },
  inject: ['coordType'],
  methods: {
    ready(map) {
      this.map = map
    },
    createStyle() {
      return this.styleJson ? parse(this.styleJson) : null
    },
    /**
     * 开始画图
     * @method draw
     */
    draw() {
      if (!this.map || !this.parent) return

      const layer = this.parent.createVectorLayer()
      this.source = layer.getSource()

      this.drawer = new Draw({
        source: this.source,
        style: this.createStyle(),
        ...this.$props
      })
      this.map.addInteraction(this.drawer)
      this.drawer.on('drawstart', this.handleDrawStart)
      this.drawer.on('drawend', this.handleDraw)
    },
    /**
     * 编辑图形模式
     * @method modify
     */
    modify() {
      this.drawer = new Modify({
        features: new Collection(this.features),
        style: this.createStyle(),
        wrapX: this.wrapX
      })
      this.drawer.on('modifystart', this.handleModifyStart)
      this.drawer.on('modifyend', this.handleModify)
      this.map.addInteraction(this.drawer)
    },
    /**
     * 完成画图
     * @method finish
     */
    finish() {
      if (this.drawer) {
        this.drawer.un('drawstart', this.handleDrawStart)
        this.drawer.un('drawend', this.handleDraw)
        this.drawer.un('modifystart', this.handleModifyStart)
        this.drawer.un('modifyend', this.handleModify)
        this.map.removeInteraction(this.drawer)
        this.drawer = null
      }
    },
    handleDrawStart(e) {
      /**
       * 画图开始时触发
       * @event drawstart
       * @param {object} e 事件对象
       */
      this.$emit('drawstart', e)
      e.feature.on('change', this.handleChange)
    },
    handleChange(e) {
      /**
       * 图形发生变化时触发
       * @event change
       * @param {object} e 事件对象
       */
      this.$emit('change', e)
    },
    handleModify(e) {
      /**
       * 修改图形结束时触发
       * @event modifyend
       * @param {object} e 事件对象
       */
      this.$emit('modifyend', e)
    },
    handleModifyStart(e) {
      /**
       * 修改图形开始时触发
       * @event modifystart
       * @param {object} e 事件对象
       */
      this.$emit('modifystart', e)
    },
    handleDraw(e) {
      //  &amp;&amp; (this.smooth &amp;&amp; this.smooth >= 2)
      if (this.type === 'LineString' &amp;&amp; this.smooth) {
        this._smothLine(e.feature)
      }
      let featureClone
      if (this.coordType !== 'WGS84') {
        let originCoord = [],
          translateCoord = []
        let coords = e.feature.getGeometry().getLastCoordinate()
        // 取第一个坐标转换
        originCoord = [coords[0], coords[1]]
        featureClone = e.feature.clone()
        translateCoord = convertFromWgs84(this.coordType, originCoord)
        // 克隆一个feature提供给对象e.convert.feature
        featureClone
          .getGeometry()
          .translate(
            translateCoord[0] - originCoord[0],
            translateCoord[1] - originCoord[1]
          )
      } else {
        featureClone = e.feature
      }
      e.convert = {
        feature: featureClone
      }
      
      this.features.push(e.feature)
      /**
       * 画图结束时触发
       * @event drawend
       * @param {object} e 事件对象
       */
      this.$emit('drawend', e)
    },
    _smothLine(feature) {
      let geometry = feature.getGeometry()
      let coords = geometry.getCoordinates()
      let smoothened = makeSmooth(coords)
      geometry.setCoordinates(smoothened)  
    },
    /**
     * 清除已画的图形
     * @method clear
     */
    clear() {
      if (this.parent) {
        this.features.forEach((feature, index) => {
          this.remove(feature)
        })
      }
    },
    /**
     * 删除已画的图形
     * @method remove
     * @param {ol/Feature} feature 图形实例
     */
    remove(feature) {
      feature.un('change', this.handleChange)
      this.parent.removeFeature(feature)
      this.features = this.features.filter(f => {
        return f !== feature
      })
    },
    addFeatures(arr) {
      if (arr.length) {
        this.features = this.features.concat(arr)
      }
    }
  },
  created() {
    this.features = []
    this.parent = getParent.call(this)
    mapReady.call(this, this.ready)
  },
  beforeDestroy() {
    if (this.map) {
      this.finish()
      this.clear()
    }
  }
}
&lt;/script>

</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-dialog.html">xdh-map-dialog</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-draw-arc.html">xdh-map-draw-arc</a></li><li><a href="module-xdh-map-draw-panel.html">xdh-map-draw-panel</a></li><li><a href="module-xdh-map-drawdown.html">xdh-map-drawdown</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-geo-layer.html">xdh-map-geo-layer</a></li><li><a href="module-xdh-map-group.html">xdh-map-group</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-panel.html">xdh-map-panel</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-warp.html">xdh-map-warp</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li><li><a href="module-xdh-map-zoom-panel.html">xdh-map-zoom-panel</a></li></ul><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-geo-layer.html#~event:mouseEnter">mouseEnter</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw">on-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw-end">on-draw-end</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-edit-start">on-edit-start</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-draw">on-finish-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-edit">on-finish-edit</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-inited">on-inited</a></li><li><a href="module-xdh-map-measure.html#~event:on-measureEnd">on-measureEnd</a></li><li><a href="module-xdh-map-drawdown.html#~event:on-toggle">on-toggle</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Sat Mar 21 2020 16:40:44 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
